<template>
  <div id="transaction">
    <x-header :left-options="{backText: ''}">商品列表</x-header>
    <div class="tranHead">
      <div class="tranHeadCon">
        <img src="../../assets/img/transaction_header_banner.png" alt="">
        <div class="tranHeadText" v-show="false">
          <p>向上好品</p>
          <p>红幸计划</p>
        </div>
      </div>
    </div>
    <div class="tranGoodsList">
      <ul>
        <li v-for="(item, index) in data" :key="index" @click="jumpTo('/p2pgoodsDetail/' + item.goods_id)">
          <div class="tranGoodsImg"><img :src="item.goods_img" alt=""></div>
          <p>{{item.goods_name}}</p>
          <p>{{item.goods_summary}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import { getP2PGoodsList } from '@api'
import { mapState, mapMutations } from 'vuex'
import { SET_LOADING } from '@store/type'

export default {
  components: {
    XHeader
  },
  watch: {
    '$route' (to, from) {
      this.$router.go(0)
    }
  },
  data () {
    return {
      data: [],
      display: true,
      meScroll: null
    }
  },
  computed: {
    ...mapState(['longitude', 'latitude'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 加载商品列表
    async loadGoods () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await getP2PGoodsList()
      this.setLoading(false)
      if (res && res.code === 200) {
        this.data = res.data
      }
    }
  },
  created () {
    this.loadGoods()
  },
  activated () {

  },
  deactivated () {

  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";
#transaction{
  /deep/ .vux-header {
    background: rgba(0,0,0,0);
    position: absolute;
    width: 100%;
    .vux-header-title{
      color: #fff;
    }
    .vux-header-left .left-arrow:before {
      border-width: .0125rem 0 0 .0125rem;
      border-color: #fff;
    }
  }
  .tranHead{
    width: 100%;
    height: 3.75rem;
    background: rgba(126,89,254,1);
    position: relative;
    .tranHeadCon{
      width: 9.46rem;
      height: 3.5rem;
      background: rgba(238,233,255,1);
      border-radius: .25rem;
      position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -50%);
      img{
        width: 100%;
        height: 100%;
      }
      .tranHeadText{
        background: rgba(238,233,255,1);
        display: inline-block;
        position: absolute;
        left: .7rem;
        top: 52%;
        transform: translateY(-50%);
        p{
          font-size: .425rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(46,6,149,1);
          line-height: .625rem;
          letter-spacing: calc(.1rem);
        }
      }
    }
  }
  .tranGoodsList{
    margin-top: 1.43rem;
    ul{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 .25rem;
      li{
        width: 4.6rem;
        background:rgba(255,255,255,1);
        border-radius: .0625rem;
        display: inline-block;
        padding: .4rem;
        margin-bottom: .25rem;
        .tranGoodsImg{
          width: 3.75rem;
          height: 3.75rem;
          margin: 0 auto .2rem;
          img{
            width: 100%;
            height: 100%;
          }
        }
        p{
          font-size: .35rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: rgba(0,0,0,1);
          line-height: .44rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
